<template>
  <div>
    <vxe-toolbar id="goodsId" :setting="{storage: true}" export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="funcFilter">查询</el-button>
        <el-button @click="funcAdd">新增</el-button>
        <el-button @click="upload">上传</el-button>

        <!-- <el-button @click="importDataEvent">导入数据</el-button> -->
      </template>
    </vxe-toolbar>

    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="700"
      :loading="loading"
      :data="tableData"
      remote-sort
      @sort-change="sortList"
    >
      <vxe-table-column>
        <vxe-table-column field="partyGroupName" title="维护机构" min-width="200" sortable />
        <template v-slot:header>
          <el-select v-model="listQuery.partyGroupCode" placeholder="请选择维护机构" clearable>
            <el-option
              v-for="item in partyGroup"
              :key="item.code"
              :label="item.groupName"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="name" title="名称" min-width="100" sortable />
        <template v-slot:header>
          <el-input v-model="listQuery.name" placeholder="请输入名称" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="goodsTypeName" title="商品类型" min-width="100" sortable />
        <template v-slot:header>
          <el-cascader
            v-model="listQuery.type"
            :options="data"
            :show-all-levels="false"
            style="width: 100%"
            placeholder="请选择商品类型"
            clearable
            @change="handleChange"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="specName" title="规格" min-width="100" sortable />
        <template v-slot:header>
          <el-select v-model="listQuery.spec" placeholder="请输入规格" clearable style="width:100%">
            <el-option
              v-for="item in specData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="barCode" title="条码" min-width="100" sortable />
        <template v-slot:header>
          <el-input v-model="listQuery.barCode" placeholder="请输入条码" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="unitName" title="单位" min-width="100" sortable />
        <template v-slot:header>
          <unitElSelect ref="unitName" @queryUnitCode="selectUnitCode" />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="auxiliaryUnitName" title="辅助单位" min-width="100" sortable />
        <template v-slot:header>
          <auxiliaryUnitElSelect
            ref="auxiliaryUnitName"
            @queryAuxiliaryUnitCode="selectAuxiliaryUnitName"
            clearable
          />
        </template>
      </vxe-table-column>

      <vxe-table-column>
        <vxe-table-column field="convertedQuantity" title="换算率" min-width="100" sortable />
        <template v-slot:header>
          <el-input v-model="listQuery.convertedQuantity" placeholder="请输入" clearable />
        </template>
      </vxe-table-column>

      <vxe-table-column title="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-tooltip v-if="(scope.row.partyGroupCode == party.branchCode || branch.level == 0)&&scope.row.isLotNumber == 0" class="item" effect="dark" content="禁用批号" placement="top">
            <vxe-button type="text" @click="funcProhibit(scope.row.code)">
              <i class="el-icon-circle-close" />
            </vxe-button>
          </el-tooltip>
          <el-tooltip v-if="(scope.row.partyGroupCode == party.branchCode || branch.level == 0)&&scope.row.isLotNumber == 1" class="item" effect="dark" content="启用批号" placement="top">
            <vxe-button type="text" @click="funcOpen(scope.row.code)">
              <i class="el-icon-circle-check" />
            </vxe-button>
          </el-tooltip>

          <!-- <el-tooltip class="item" effect="dark" content="详情" placement="top">
            <vxe-button type="text" @click="funcDetail(scope.row.code)">
              <i class="el-icon-document" />
            </vxe-button>
          </el-tooltip> -->
          <el-tooltip v-if="scope.row.partyGroupCode == party.branchCode || branch.level == 0" class="item" effect="dark" content="编辑" placement="top">
            <vxe-button type="text" @click="funcEdit(scope.row.code)">
              <i class="el-icon-edit" />
            </vxe-button>
          </el-tooltip>
          <el-tooltip v-if="scope.row.partyGroupCode == party.branchCode || branch.level == 0"  class="item" effect="dark" content="删除" placement="top">
            <vxe-button type="text" @click="funcDelete(scope.row.code)">
              <i class="el-icon-delete" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />

    <vxe-modal v-model="modelAddFlag" title="新增" width="700" height="750" resize>
      <compAdd ref="addRef" @fatherAddMethod="fatherAdd" @fatherCancelMethod="fatherCancel" />
    </vxe-modal>
    <vxe-modal v-model="modelEditFlag" title="编辑" width="750" height="750" resize>
      <compEdit ref="editRef" @fatherEditMethod="fatherEdit" @fatherCancelMethod="fatherCancel" />
    </vxe-modal>
    <vxe-modal v-model="modelUploadFlag" title="导入" width="1100" height="500" resize>
      <compUpload ref="uploadRef" @fatherUploadMethod="fatherUpload" @fatherCancelMethod="fatherCancel"/>
    </vxe-modal>
    <!-- <vxe-modal v-model="modelDetailFlag" title="详情" width="700" height="700" resize>
      <compDetail ref="detailRef" />
    </vxe-modal> -->

  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import XEUtils from "xe-utils";
import VXEUtils from "vxe-utils";
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
import compAdd from "./components/goodsAdd.vue";
import compEdit from "./components/goodsEdit.vue";
import compDetail from "./components/goodsDetail.vue";
import request from "@/utils/request";
import unitElSelect from "./components/unitElSelect.vue";
import auxiliaryUnitElSelect from "./components/auxiliaryUnitElSelect.vue";
import compUpload from './components/upload.vue'
import partyGroupSelect from '@/views/components/partyGroupSelect.vue'

export default {
  name: "GoodsList",
  components: {
    compAdd,
    compEdit,
    // compDetail,
    unitElSelect,
    auxiliaryUnitElSelect,
    compUpload,
    partyGroupSelect

  },
  data() {
    return {
      branch: this.$store.getters.branch,
      party: this.$store.getters.party,
        fileList: [],
        uploadUrl:this.BASE_API_URL + 'arpa-basic-api/goods/uploadFile',
        form: {
          filePath:'',
          isView:'2'
        },
      specData:[],//规格数据

      message: "",
      loading: false,
      tableData: [],
      data: [],
      partyGroup:[],
      typeData: [],
      modelUploadFlag:false,
      modelAddFlag: false,
      modelEditFlag: false,
      modelDetailFlag: false,
      copy: false,
      // 所属辅助单位
      unitData: [],
      // 所属单位
      auxiliaryUnitData: [],
      listQuery: {
        code: "",
        name: "",
        mnemonic: "",
        type: [],
        typeCode: "",
        spec: "",
        convertedQuantity:'',
        lotNumber: "",
        barCode: "",
        unitCode: "",
        auxiliaryUnitCode: "",
        miniStock: "",
        maxStock: "",
        pageNum: 1,
        pageSize: 10,
        sortField: "",
        sortType: "",
        partyGroupCode:'',
        total: 0,
        isLotNumber: ''
      }
    };
  },
  created() {
    this.findGoodsTypeList();
    this.findUnitCodeList();
    this.findAuxiliaryUnitCodeList();
    this.getPartyGroup();
    this.getSpec()

  },
  methods: {
    //获取规格
    getSpec(){
      request({ url: '/arpa-basic-api/dict/listDict?types=goodsSpec', method: 'get',}).then(response => {
        this.specData = response.data[0].dictList
      })
    },

    //获取机构信息
    getPartyGroup() {
      request({
        url: '/arpa-basic-api/partyGroup/allPartyGroup',
        method: 'get'
      }).then(response => {
        this.partyGroup = response.data
        // this.$refs.partyGroupSelect.initData(this.partyGroup, 'setPartyGroupCode')
      }).then(response => {
        this.findList()
      })
    },
    // // 选择组织机构
    // setPartyGroupCode(value) {
    //   this.listQuery.partyGroupCode = value
    // },
      // 导入
      upload(){
        this.modelUploadFlag = true
      } ,
      // 增加组件的父方法
      fatherUpload() {
        this.modelUploadFlag = false
        this.findList()
      },
    selectUnitCode(value) {
      this.listQuery.unitCode = value;
    },
    selectAuxiliaryUnitName(value) {
      this.listQuery.auxiliaryUnitCode = value;
    },
    // 翻译类型名称
    formatterType({ cellValue }) {
      const item = this.typeData.find(item => item.code === cellValue);
      return item ? item.name : "";
    },
    handleChange(value) {
    },
    findList() {
      this.loading = true;
      const length = this.listQuery.type.length;
      if (length > 0) {
        this.listQuery.typeCode = this.listQuery.type[length - 1];
      } else {
        this.listQuery.typeCode = "";
      }
      return new Promise(resolve => {
        request({
          url: "/arpa-basic-api/goods",
          method: "get",
          params: this.listQuery
        }).then(response => {
          this.tableData = response.data.records;
          this.listQuery.total = response.data.total;
          this.loading = false;
          resolve();
        })
      })
    },
    findGoodsTypeList() {
      request({
        url: "/arpa-basic-api/goodsType/queryTreeData",
        method: "get",
        params: { level: 1 }
      }).then(response => {
        this.data = response.data;
      });
    },

    //获取单位
    findUnitCodeList() {
      request({
        url: "/arpa-basic-api/unit",
        method: "get",
        params: { type: 0 }
      }).then(response => {
        this.unitData = response.data.records;
        this.$refs.unitName.unitData = this.unitData;
      });
    },

    //获取辅助单位
    findAuxiliaryUnitCodeList() {
      request({
        url: "/arpa-basic-api/unit",
        method: "get",
        params: { type: 1 }
      }).then(response => {
        this.auxiliaryUnitData = response.data.records;
        this.$refs.auxiliaryUnitName.initDict(this.auxiliaryUnitData);
      });
    },
    // 查询
    funcFilter() {
      this.listQuery.pageNum = 1;
      this.findList();
    },
    // 排序
    sortList({ column, property, order }) {
      this.listQuery.sortField = property;
      this.listQuery.sortType = order;
      this.findList();
    },
    // 添加方法
    funcAdd() {
      this.$refs.addRef.reset();    //重置
      this.$refs.addRef.data = this.data;
      this.$refs.addRef.$refs.unitName.unitData = this.unitData;
      this.$refs.addRef.$refs.auxiliaryUnitName.auxiliaryUnitData = this.auxiliaryUnitData;
      this.$refs.addRef.specData = this.specData;
      this.modelAddFlag = true;
    },
    // 修改方法
    funcEdit(code) {
      this.$refs.editRef.$refs.unitName.unitData = this.unitData;
      this.$refs.editRef.$refs.auxiliaryUnitName.auxiliaryUnitData = this.auxiliaryUnitData;
      this.$refs.editRef.specData = this.specData;

      this.$refs.editRef.getInfo(
        code,
        this.data,
        this.unitCodeList,
        this.auxiliaryUnitCodeList
      );
      this.modelEditFlag = true;
    },
    // 详情方法
    funcDetail(code) {
      this.$refs.detailRef.$refs.unitName.unitData = this.unitData;
      this.$refs.detailRef.$refs.auxiliaryUnitName.auxiliaryUnitData = this.auxiliaryUnitData;
      this.$refs.detailRef.getInfo(
        code,
        this.data,
        this.unitCodeList,
        this.auxiliaryUnitCodeList
      );
      this.modelDetailFlag = true;
    },
    // 删除方法
    funcDelete(row) {
      this.$confirm('确认删除吗？').then(_ => {
        request({ url: `/arpa-basic-api/goods`, method: 'delete', params: { codes: row } }).then(response => {
          this.$message({ message: response.msg, type: 'success' })
          this.findList()
        })
      }).catch(_ => {
      })
    },
    // 增加组件的父方法
    fatherAdd() {
      this.modelAddFlag = false
      this.findList()
    },
    // 编辑组件的父方法
    fatherEdit() {
      this.modelEditFlag = false
      this.findList()
    },
    // 禁用方法
    funcProhibit(row) {
      this.$confirm('确认禁用批号吗？').then(_ => {
        request({
          url: `/arpa-basic-api/goods/queryIsLotNumber/${row}`,
          method: 'get',
          params: { isLotNumber: 1 }
        }).then(response => {
          this.$message({ message: response.msg, type: 'success' })
          this.findList()
        })
      }).catch(_ => {
      })
    },
    // 开启方法
    funcOpen(row) {
      this.$confirm('确认启用批号吗？').then(_ => {
        request({
          url: `/arpa-basic-api/goods/queryIsLotNumber/${row}`,
          method: 'get',
          params: { isLotNumber: 0 }
        }).then(response => {
          this.$message({ message: response.msg, type: 'success' })
          this.findList()
        })
      }).catch(_ => {
      })
    },
    // 公共取消
    fatherCancel(modelFlag) {
      switch (modelFlag) {
        case 'add':
          this.modelAddFlag = false
          break
        case 'edit':
          this.modelEditFlag = false
          break
        case 'detail':
          this.modelDetailFlag = false
          break
        case 'upload':
          this.modelUploadFlag = false
          break

        default:
      }
    },
    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.findList()
    },
    // // 导入
    // importDataEvent() {
    //   this.$refs.xTable.importData()
    // }
  }
}
</script>
